<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Sevida Responsive Blogger Template Documentation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Description">
    <meta name="author" content="Autor">
    
    <!-- loading the css -->
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <style type="text/css">
    body {
        padding-bottom: 40px;
    }

    section {padding: 60px 0 0 0;}
    </style>

        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->

          <!-- Various Icons (Favicon, Touch Icon,... -->
          <link rel="shortcut icon" href="assets/img/favicon.ico">
          <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
          <link rel="apple-touch-icon" sizes="72x72" href="assets/img/apple-touch-icon-72x72.png">
          <link rel="apple-touch-icon" sizes="114x114" href="assets/img/apple-touch-icon-114x114.png">

      </head>



      <body data-spy="scroll" data-target=".navbar" id="top">

        <!-- ========================= NAVIGATION BAR >> START ========================= -->
        <div class="navbar navbar-fixed-top navbar-inverse">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> 
                    <a class="brand" href="#overview">Sevida Documentation</a><!-- TIP: Change this for the name of your file -->
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="#overview">Overview</a></li>

                            <li class="dropdown">
                                <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">Getting started<b class="caret"></b></a>
                                <ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
                                    <li><a href="#getting_started">Getting Started</a></li>
                                        <li><a href="#getting_started_installation">Installation</a></li>
                                            <li><a href="#getting_started_activating_theme_options">Default Setting</a></li>
                                <li><a href="#getting_started_importing_demo_contet">Layout Explain</a></li>                            
                                        <li><a href="#getting_started_setting_up_the_menu">Setting up the menu</a></li>
										<li><a href="#getting_started_setting_up_the_secial_icon">Setting Social Icon</a></li>
										<li><a href="#getting_started_setting_up_the_time_format">Date (Month Name)</a></li>
                                            </ul>

                                        </li> 
                                <li class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop2" href="#creating_content_post_pages_and_portfolio">Creating Content<b class="caret"></b></a>
                                    <ul aria-labelledby="drop2" role="menu" class="dropdown-menu">
                                        <li><a href="#creating_content_post_pages_and_portfolio_post">Post width Image</a></li>
                                            <li><a href="#creating_content_post_pages_and_portfolio_pages">Auto Featured Post</a></li> 
											<li><a href="#creating_content_manual_slide">Manual Featured Post</a></li> 
											<li><a href="#creating_content_post_labels">Post by Label</a></li>
											<li><a href="#creating_error_pages">Error Page</a></li> 
											<li><a href="#creating_content_archive">Archive Page</a></li>										
											
                                                </ul>
                                            </li>
                                 <li class="dropdown">
                                                <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop3" href="#shortcodes_widgets">Widget Setting<b class="caret"></b></a>
                                    <ul  aria-labelledby="drop3" role="menu" class="dropdown-menu">
										<li><a href="#sumloadmore">Summary and Load More</a></li>
										<li><a href="#page_navigation">Page Navigation</a></li>										
                                        <li><a href="#recentcommentwidgets">Recent Comments</a></li>
                                            <li><a href="#jsonresultwidget">JSON Search result</a></li>
                                                <li><a href="#emoticon">Emoticon</a></li>
												<li><a href="#newsticker">News Ticker</a></li>
							<li><a href="#related_post">Related Post</a></li>
                                                </ul>
                                            </li>
                                                        <li class="dropdown">
                                                            <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop3" href="#shortcodes_widgets">Customization<b class="caret"></b></a>
                                                            <ul aria-labelledby="drop3" role="menu" class="dropdown-menu">                                                                
                                                                <li><a href="#theme_customizer">Theme Customizer</a></li>                                                              
                                                            </ul>
                                                        </li>




                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <!-- ========================= NAVIGATION BAR >> END ========================= -->



                                                            <!-- ========================= MAIN CONTAINER >> START ========================= -->
                                                            <div class="container">

                                                                <!-- ========================= SECTION: OVERVIEW >> START ========================= -->
                                                                <section id="overview">

                                                                    <div class="hero-unit">
                                                                        <h1>Sevida Blogger Documentation</h1>
                                                                        <p>Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to open new ticket in our support forum <a target="_blank" href="http://satankmkr.ticksy.com/">here</a>. Thanks so much! </p>
                                                                        <div class="row-fluid">
                                                                            <div class="span3"><a target="_blank" href="http://themeforest.net/user/satankmkr" class="btn btn-inverse btn-large btn-block">Contact Form</a></div>
                                                                            <div class="span3"><a href="#changelog" role="button" class="btn btn-success btn-large btn-block" data-toggle="modal">Changelog</a></div>
                                                                            <div class="span3"><a href="#credits" role="button" class="btn btn-info btn-large btn-block" data-toggle="modal">Credits</a></div>
                                                                        </div>

                                                                    </div>

                                                                    <hr>

                                                                    <div class="row-fluid">
                                                                        <div class="span6">
                                                                            <table width="100%">
                                                                                <tr>
                                                                                    <td>Author:</td>
                                                                                    <td><a href="http://themeforest.net/user/satankmkr/">satankmkr</a></td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Demo :</td>
                                                                                    <td><a href="http://sevida-satankmkr.blogspot.com/">Sevida Demo Page</a></td>
                                                                                </tr>																				
                                                                            </table>
                                                                        </div>
                                                                        
                                                             
                                                                        <div class="span6">
                                                                            <table width="100%">
                                                                                <tr>
                                                                                    <td>Created:</td>
                                                                                    <td>2013-04-26</td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Modified:</td>
                                                                                    <td>2013-08-17</td>
                                                                                </tr>
                                                                                 <tr>
                                                                                    <td>Current Version:</td>
                                                                                    <td>1.2</td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Documentation Version</td>
                                                                                    <td>1.2</td>
                                                                                </tr>
                                                                            </table>
                                                                        </div>
                                                                    </div>

                                                                    <hr>

                                                                </section>
                                                                <!-- ========================= SECTION: OVERVIEW >> END ========================= -->



                                                                <!-- ========================= SECTION: MARKUP >> START ========================= -->
                                                                <section id="getting_started">
                                                                    <div class="page-header">
                                                                        <h1>Getting started</h1>
                                                                    </div>

                                                                    <p>I assume you have a blogger account, so let&#39;s get started!</p>
                                                                    <hr />

                                                                    <h3 id="getting_started_installation">Installation</h3>
                                                                    <p>
                                                                        You can do it by follow this step:
                                                                    </p> <div class="row">																	
                                                                    <ol>
                                                                        <li>
                                                                            Unzip the <strong>&ldquo;sevida-theme.zip&rdquo;</strong> file.
                                                                        </li>
                                                                        <li>
                                                                            On Blogger Dashboard Click <strong class="template">Template</strong>.
                                                                        </li>
																		<li>
                                                                            Click <strong class="buttonx">Backup/Restore</strong> button (Top Right).
                                                                        </li>
																		<li>
                                                                            Click <strong class="choose">Choose File</strong> button. Find where the <strong>&ldquo;sevida-theme.xml&rdquo;</strong> file location.
                                                                        </li>
																		<li>
                                                                            Then Click <strong class="buttonorg">Upload</strong>.
                                                                        </li>
                                                                    </ol>
																	<p><span style="color:red;font-weight:bold">NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work</span></p><br/>
																	<p><img class="img-polaroid" src="assets/install.jpg" /> </p>
                                                                    </div>


                                                                    <hr />
                                                                    <div class="row">
                                                                       
                                                                            <div class="page-header"><h3 id="getting_started_activating_theme_options">Default Setting</h3></div>
                                                                            <p>
                                                                                After installing the theme, this it the minimun setting to make all widget works fine in this themes.
                                                                            </p>

                                                                        <div class="span3"><p><h4>Embedded Comment</h4>
																		This to make comment area like the Demo and make Emoticon show
																		<ol><li>On Blogger Dashboard Click <strong class="setting">Setting</strong>.</li>
																		<li>Click <strong class="orange">Posts and Comments</strong></li>
																		<li>in Comment Location Choose <strong class="buttonx">Embedded</strong></li>
																		<li>Then Click <strong class="buttonorg">Save settings</strong>.</li>
																		</ol></p></div>
                                                                        <div class="span9"><p><img class="img-polaroid" src="assets/comment.jpg" /></p></div>
																		<div class="span3"><p><h4>Blog Feed</h4> 
																		This to make recent comment, Search Result, Featured Post, and Post by Label work fine
																		<ol><li>On Blogger Dashboard Click <strong class="setting">Setting</strong>.</li>
																		<li>Click <strong class="orange">Other</strong></li>
																		<li>in Site Feed <i class=" icon-chevron-right"></i> Allow Blog Feed Choose <strong class="buttonx">Full</strong> Or <strong class="buttonx">Short</strong> </li>
																		<li>Then Click <strong class="buttonorg">Save settings</strong>.</li>
																		</ol>
																		<span style="color:red">NB:<br/>
																		1. If yours post have image uploaded on blogspot you can choose <strong>SHORT</strong>. but if yours post just have image from third party image hosting you must choose <strong>Full</strong><br/>
																		2. Blogger feed must be not redirect to other feed site like Feedburner<br/>
																		3. Your's blog or website not Private</span></p></div>
                                                                        <div class="span9"><p><img class="img-polaroid" src="assets/other.jpg" /></p></div>
                                                                    </div>
																	<div class="row">
                                                                    <div class="page-header"><h3 id="getting_started_importing_demo_contet">Layout Explain</h3></div>
                                                                        <div class="span3">
																		<ol>																		
																		<li>Right Header Widget Area(Ads 468x60)</li>
																		<li>Auto Featured Post Area</li>
																		<li>Top Sidebar Area</li>
																		<li>Middle Sidebar Area<br/>
																		a. Popular Post<br/>
																		b. Recent Comment <br/>
																		c. Archive Widget</li>	
																		<li>Bottom Sidebar Area</li>
																		<li>Label Post Widget Area</li>
																		<li>Footer Widget Area</li>	
																		<li>Manual Featured Post Area (work with Image Widget)</li>																			
																		</ol>
																		</div>
																		 <div class="span9">
																		 <p><img class="img-polaroid" src="assets/layouts.jpg" /></p>
																		 </div>
																		</div>
                              
                    <div class="page-header"><h3 id="getting_started_setting_up_the_menu">Setting up the menu</h3>
					<img src="assets/topmenu.png" class="img-polaroid"/><br/>
					<div style="text-align:center">Top Menu</div><br/>
					<img src="assets/menu.png" class="img-polaroid"/><br/>
					<div style="text-align:center">Middle Menu</div><br/>
                        <p>
                            To Edit Menu in this theme you can follow this step:
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Top Menu Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;ul class=&#39;sf-menu&#39; id=&#39;topmenunav&#39;&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;More&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Menu&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						 </li>
						 <li>Change # with yours URL link</li><br/><br/>
						 <li>Middle Menu Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;ul class=&#39;sf-menu&#39; id=&#39;menunav&#39;&gt;
  &lt;li&gt;&lt;a class=&#39;home&#39; expr:href=&#39;data:blog.homepageUrl&#39;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Archive&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Comments&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;With Sub Menu&lt;/a&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Sub Menu&lt;/a&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Error 404&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						 </li>
						 <li>Change # with yours URL link</li>
						 </ol>	                                                    
      					
						</div>               

<div class="page-header"><h3 id="getting_started_setting_up_the_secial_icon">Setting Social Icon</h3></div>
 <img src="assets/socialicon.png" class="img-polaroid"/><br/><br/>
                        <p>
                            To Edit Social Icon in this theme you can follow this step:
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;ul class=&#39;sociico&#39; id=&#39;icon-socialmn&#39;&gt;
  &lt;li class=&#39;sotw&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;twitter&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sofb&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;facebook&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sogo&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;google&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sorss&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;rss&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;solinkn&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;linkedin&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sodrib&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;dribbble&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&#39;sopint&#39;&gt;&lt;a href=&#39;#&#39; target=&#39;_blank&#39;&gt;pinterest&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
						 </li>
						 <li>Change # with yours Social URL link</li>
						 </ol>	                                                    
      					
						</div>
	<div class="page-header"><h3 id="getting_started_setting_up_the_time_format">Date (Month Name)</h3></div>
 <img src="assets/time.png" class="img-polaroid"/><br/><br/>
                        <p>
                            To Edit Date Date (Month Name) in this theme you can follow this step:
                        </p>
						<div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint html">datetime();</pre>
						 Change with this script (Default Javacript):
						 <pre class="prettyprint html">datetime({
months:["January","February","March","April","May","June","July","August","September","October","November","December"]
});</pre>
change Month name with yours language.
						 </li>						
						 </ol>
						</div>
              </section>
              <!-- ========================= SECTION: MARKUP >> END ========================= -->


              <section id="creating_content_post_pages_and_portfolio">
                <div class="page-header">
                    <h1>Creating Content<small> Post, Featured Post, Label Post, Slider Label Post and Error Page</small></h1>
                </div>
                <div id="creating_content_post_pages_and_portfolio_post" class="page-header"><h2>Post Width Image</h2></div>
                <p>
                    To make post with image look good you sould make the HTML like this example.  
                </p>                
                <div class="row">                    
                        <div class="page-header"><h4>Default Image Blogger HTML (without caption)</h4></div>
						<pre class="prettyprint html">&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;
&lt;img border=&quot;0&quot; height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;&lt;/div&gt;</pre>
						<div class="page-header"><h5>Image HTML Recomended</h5></div>
						<div class="row">
						<div class="span9">
						<h5>For Image Float to Left</h5>
						<pre class="prettyprint html">&lt;a class=&quot;left&quot; href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot;&gt;
&lt;img height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;</pre></div>
<div class="span3"><img class="img-polaroid" src="assets/floatleft1.jpg" />
</div>
</div>	<br/><br/>
<div class="row">
<div class="span9">
						<h5>For Image Float to Right</h5>
						<pre class="prettyprint html">&lt;a class=&quot;right&quot; href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot;&gt;
&lt;img height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;</pre></div>
<div class="span3"><img class="img-polaroid" src="assets/floatright1.jpg" />
</div>
</div>	<br/><br/>	
<div class="row">
<div class="span9">
						<h5>For Center Image</h5>
						<pre class="prettyprint html">&lt;a class=&quot;center&quot; href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot;&gt;
&lt;img height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;</pre></div>
<div class="span3"><img class="img-polaroid" src="assets/center1.jpg" />
</div>
             </div>      
                </div>

                <div class="row">                    
                        <div class="page-header"><h4>Default Image Blogger HTML (with caption)</h4></div>
						<pre class="prettyprint html">&lt;table align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;tr-caption-container&quot; style=&quot;margin-left: auto; margin-right: auto; text-align: center;&quot;&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: center;&quot;&gt;&lt;a href=&quot;http://4.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8U/5GRuFTuqmGk/s1600/install-1.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: auto; margin-right: auto;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;199&quot; src=&quot;http://4.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8U/5GRuFTuqmGk/s320/install-1.png&quot; width=&quot;320&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;tr-caption&quot; style=&quot;text-align: center;&quot;&gt;mjkahsdaskkdhkashkdkshk&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;</pre>
						<div class="page-header"><h5>Image HTML Recomended</h5></div>
						<div class="row">
						<div class="span9">
						<h5>For Image Float to Left</h5>
						<pre class="prettyprint html">&lt;div class=&quot;left&quot;&gt;
&lt;a href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot;&gt;
&lt;img height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;
&lt;span&gt;Caption Text Here&lt;/span&gt;
&lt;/div&gt;</pre></div>
<div class="span3"><img class="img-polaroid" src="assets/floatleft2.jpg" />
</div>
</div>	<br/><br/>
<div class="row">
<div class="span9">
						<h5>For Image Float to Right</h5>
						<pre class="prettyprint html">&lt;div class=&quot;right&quot;&gt;
&lt;a href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot;&gt;
&lt;img height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;
&lt;span&gt;Caption Text Here&lt;/span&gt;
&lt;/div&gt;</pre></div>
<div class="span3"><img class="img-polaroid" src="assets/floatright2.jpg" />
</div>
</div>	<br/><br/>	
<div class="row">
<div class="span9">
						<h5>For Center Image</h5>
						<pre class="prettyprint html">&lt;div class=&quot;center&quot;&gt;
&lt;a href=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s1600/install-1.png&quot;&gt;
&lt;img height=&quot;199&quot; src=&quot;http://2.bp.blogspot.com/-Z92z7pOd0XU/UWaR-uReB-I/AAAAAAAAI8Q/eyjmbZs70Dw/s320/install-1.png&quot; width=&quot;320&quot; /&gt;
&lt;/a&gt;
&lt;span&gt;Caption Text Here&lt;/span&gt;
&lt;/div&gt;</pre></div>
<div class="span3"><img class="img-polaroid" src="assets/center2.jpg" />
</div>
             </div>      
                </div>
						
              


                    <div class="page-header">
                        <h3 id="creating_content_post_pages_and_portfolio_pages">Auto Featured Post (Random, Recent, Random by Label or Recent by Label)</h3>
                    </div>
					<div class="row"> 					
					<div class="span5">
                    To add Featured Post widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript widget</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;featpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#featpost&quot;).AutofeaturedPost({
MaxPost:5
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
                                </ol>								
</div>
					<div class="span7">
					<img class="img-polaroid" src="assets/featuredpost.png"/>
					</div>
					</div>
					<div class="row"> 
<p>(Default) Complete Javascript to call Auto Featured Post like this code:
								<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).AutofeaturedPost({
blogURL: &quot;&quot;,
MaxPost: 4,		
ImageSize: 500,
Summarylength: 150,
slideSpeed:5000,
ShowDate: true,
ShowComment: true,
animation:&quot;slide&quot;,
NoCommentText: &quot;No Comment&quot;,
OneCommentText: &quot;Comment&quot;,
CommentText: &quot;Comments&quot;,
RandompostActive: true,
MonthNames: [&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;],
pBlank: &quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;,
tagName: false
});</pre><br/>
Default javascript mean if you just insert code like this:<br/>
<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).AutofeaturedPost();</pre>
Featured post result will same with default script.<br/><br/>
if you want to change it. ex: Show featured with maximal 8 from label Movies, don't show date and comment, and post not Random (Recent). Yours script will look like this:<br/>
<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).AutofeaturedPost({
MaxPost: 8,
ShowDate: false,
ShowComment: false,
RandompostActive: false,
tagName: "Movies"
});</pre>
</p>					
					<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Maximum number artikel will show on Featured Post</td>
                                        </tr>
                                        <tr>
                                            <td>Summarylength</td>
                                            <td>Number of summary characters to show.</td>
                                        </tr>
                                        <tr>
                                            <td>slideSpeed</td>
                                            <td>Set the speed of the slideshow cycling, in milliseconds</td>
                                        </tr>
                                        <tr>
                                            <td>ImageSize</td>
                                            <td>Post Image size (in pixel)</td>
                                        </tr>
										<tr>
                                            <td>ShowDate</td>
                                            <td>If you want to show post date (true or false)</td>
                                        </tr>
										<tr>
                                            <td>ShowComment</td>
                                            <td>If you want to show Comment number (true or false)</td>
                                        </tr>
										<tr>
                                            <td>animation</td>
                                            <td>Select your animation type, "fade" or "slide"</td>
                                        </tr>
										<tr>
                                            <td>NoCommentText</td>
                                            <td>Text if your post don't have comment</td>
                                        </tr>
										<tr>
                                            <td>OneCommentText</td>
                                            <td>Text if your post have one comment</td>
                                        </tr>
										<tr>
                                            <td>CommentText</td>
                                            <td>Text if your post have more than one comment</td>
                                        </tr>
                                        <tr>
                                            <td>RandompostActive</td>
                                            <td>default <i>true</i>. It's will show article ramdomly. If want to show Recent Post just change to <i>false</i> </td>
                                        </tr>                                        
                                        <tr>
                                            <td>pBlank</td>
                                            <td>Backup image if post don't have image store on blogspot or picasa web</td>
                                        </tr>
                                        <tr>
                                            <td>MonthNames</td>
                                            <td>Format months name</td>
                                        </tr>
                                        <tr>
                                            <td>tagName</td>
                                            <td>If you want to show Featured Post by the Label. Example: to show featured post from <i>Sports</i> Label just write like this <i>tagName:&quot;Sports&quot;</i></td>
                                        </tr>                                      
                                    </tbody>
                                </table> 
				
				</div>
				<div class="page-header">
                        <h3 id="creating_content_manual_slide">Manual Slide Show (Using Image Widget)</h3>
                    </div>
					<div class="row">
<div class="span7">
					<img class="img-polaroid" src="assets/featuredpost.png"/>
					</div> 					
					<div class="span5"><h4>Manual Slide Show</h4>
                    To Create Manual Slide Show follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>On Manual Slideshow Widget Area Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose Image Widget</li>
									<li><img src="assets/imagewidget.png"/><br/><br/>
									<ol>
									<li>Fill With Image Title</li>
									<li>Image Description</li>
									<li>Link When Image or Title Click</li>
									<li>Search Yours Image</li>
									<li>Uncheck shrink to fit</li>
									</ol><br/><br/>
									<strong>NB</strong> : Recommended Image Size 670px x 280px<br/>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>									
                                <li>If You Whan Show 5 image, do this step 5 Time</li><br/>
								<li>If You Whan change Slideshow speed or animation type go to <strong class="template">Template</strong></li>
								<li>Click <strong class="buttonx">Edit HTML</strong> and Scroll down and find this code:<br/>
								<pre class="prettyprint html">manualfeaturedPost();</pre>
								and change with (Default Javascript): 
								<pre class="prettyprint html">manualfeaturedPost({
slideSpeed:5000,
animation:&quot;slide&quot;
});</pre>
								<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>slideSpeed</td>
                                            <td>Set the speed of the slideshow cycling, in millisecond</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Select your animation type, "fade" or "slide"</td>
                                        </tr>	
 </tbody>
                                </table> 
								</li>
								<li>Then Click <strong class="buttonorg">Save Template</strong></li>
								</ol>
										
</div>
					
					</div>
				 <div class="page-header">
                        <h3 id="creating_content_post_labels">Post by Label (Slider, Horizontal and Vertical Post)</h3>
                    </div>
					<div class="row"> 
<div class="span7">
					<img class="img-polaroid" src="assets/Sliderlabelpost.png"/>
					</div>					
					<div class="span5"><h4>Slider Post</h4>
                    To add Post by Label (Slider Post) widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;sportpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#sportpost&quot;).RecentPostbyTag({
MaxPost:9,
ImageSize:&quot;s180-p&quot;,
postType:&quot;s&quot;,
tagName:&quot;Sports&quot;
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
									<li><b>Note:</b> In <i>tagName</i> is name of the Post Label that will show. on this sample is <i>"Sports"</i> mean will display artikel from <i>Sports</i> label. 
									</li>
                                </ol>								
</div>
					
					</div>
					<hr/>
					<div class="row"> 
<div class="span4">
					<img class="img-polaroid" src="assets/labelpostv.png"/>
					</div>					
					<div class="span8"><h4>Vertical Post</h4>
                    To add Post by Label (Vertical Post) widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;musicpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#musicpost&quot;).RecentPostbyTag({
MaxPost:6,
FirstImageSize:&quot;s220-p&quot;,
ImageSize:&quot;s80-p&quot;,
tagName:&quot;Music&quot;,
postType: &quot;v&quot;,
MoreText: &quot;View All About&quot;,
AjaxLoad: true,
MoreNumPost: 6
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
									<li><b>Note:</b> In <i>tagName</i> is name of the Post Label that will show. on this sample is <i>"Music"</i> mean will display artikel from <i>Music</i> label. <br/>
									if you are use Page Navigation, MoreNumPost must be same with postperpage number in pageNavi script.<br/>
									if AjaxLoad <i>false</i> page will redirect to More Post page</li>
                                </ol>								
</div>
					
					</div><br/><br/>
					<div class="row"> 	
<div class="span7">
					<img class="img-polaroid" src="assets/labelposthori.png"/>
					</div>					
					<div class="span5"><h4>Horizontal Post</h4>
                    To add Post by Label (Horizontal Post) widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;webpost&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
jQuery(&quot;#webpost&quot;).RecentPostbyTag({
MaxPost:6,
FirstImageSize:&quot;s220-p&quot;,
ImageSize:&quot;s80-p&quot;,
tagName:&quot;Web Design&quot;,
postType: &quot;h&quot;,
MoreText: &quot;View All About&quot;,
AjaxLoad: true,
MoreNumPost: 6
});
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
									<li><b>Note:</b> In <i>tagName</i> is name of the Post Label that will show. on this sample is <i>"Web Design"</i> mean will display artikel from <i>Web Design</i> label. <br/>
									if you are use Page Navigation, MoreNumPost must be same with postperpage number in pageNavi script.<br/>
									if AjaxLoad <i>false</i> page will redirect to More Post page</li>
                                </ol>								
</div>
					
					</div><br/><br/>
					<div class="row"> 
<p>(Default) Complete Javascript to call Post by Label (Slider, Horizontal and Vertical Post) like this code:
								<pre class="prettyprint html">jQuery(&quot;#ID_Place_To_Load_Plugin&quot;).RecentPostbyTag({
blogURL: &quot;&quot;,
MaxPost: 5,
FirstImageSize: &quot;s220-p&quot;,
ImageSize: &quot;s80-p&quot;,
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
Summarylength: 100,	
MoreText: &quot;View All About&quot;,
LoadMoreText: &quot;Load More Post&quot;,
MoreNumPost: 6,
AjaxLoad: true,
postType: &quot;v&quot;,			
pBlank: &quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;,
MonthNames: [&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;],
tagName: false
});</pre></p>					
					<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Maximum number of article will be show</td>
                                        </tr>
										<tr>
                                            <td>FirstImageSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br>
											To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square.<br>
											Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)
											</td>
                                        </tr>
										 <tr>
                                            <td>ImageSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br>
											To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square.<br>
											Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)
											</td>
                                        </tr>
										<tr>
                                            <td>ShowDesc</td>
                                            <td>If you want to show or hide post description (work in vertical and horizontal) (true or false)</td>
                                        </tr>
										<tr>
                                            <td>ShowDate</td>
                                            <td>If you want to show or hide date <i>true</i> to show or <i>false</i> to hide</td>
                                        </tr>
										<tr>
                                            <td>ShowComment</td>
                                            <td>If you want to show or hide comment number <i>true</i> to show or <i>false</i> to hide</td>
                                        </tr>
										<tr>
                                            <td>Random</td>
                                            <td>If you want to generate random post <i>true</i> to random or <i>false</i> to recent. if you set true AjaxLoad will not work (same like AjaxLoad set false).</td>
                                        </tr>
                                        <tr>
                                            <td>Summarylength</td>
                                            <td>Number of summary characters to show.</td>
                                        </tr>
                                        <tr>
                                            <td>MoreText</td>
                                            <td>More Button Text (If post generate from label/tag)</td>
                                        </tr>
										<tr>
                                            <td>LoadMoreText</td>
                                            <td>More Button Text (if post generate from recent post or tagName still false and AjaxLoad true)</td>
                                        </tr>
                                        <tr>
                                            <td>MoreNumPost</td>
                                            <td>Number post will show if page redirect (AjaxLoad set false) if you'r use pageNavi script this number must same with postperpage number</td>
                                        </tr>
										<tr>
                                            <td>AjaxLoad</td>
                                            <td>If you'r want More Button will load more from next page and add after last post. If you set false page will redirect if More Button clicked</td>
                                        </tr>
										<tr>
                                            <td>postType</td>
                                            <td>There are Three kind of PostType: "v" (vertical Post), "h" (horizontal Post) and "s" (Slider Post)</td>
                                        </tr>										
                                        <tr>
                                            <td>pBlank</td>
                                            <td>Backup image if post don't have image store on blogspot or picasa web</td>
                                        </tr>
                                        <tr>
                                            <td>MonthNames</td>
                                            <td>Format months name</td>
                                        </tr>
                                        <tr>
                                            <td>tagName</td>
                                            <td>If you want to show Post by the Label. Example: to show post from <i>Sports</i> Label just write like this <i>tagName:&quot;Sports&quot;</i></td>
                                        </tr>                                      
                                    </tbody>
                                </table> 
				
				</div>
					<div class="creating_error_pages"><h2 id="creating_error_pages">Error Page</h2></div>
					<hr/>
                        <div class="row">
						<div style="text-align:center">
						<img src="assets/error404.png" class="img-polaroid"/></div>
						<br/><br/>
						<p>To change text on Error Page follow this step</p>
                            <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						  <pre class="prettyprint html">&lt;div class=&#39;error-custom&#39;&gt;

&lt;h2&gt;404 Not Found&lt;/h2&gt;
&lt;p class=&#39;error-body&#39;&gt;We&amp;#39;re sorry but we could not find the page you are looking for.&lt;br/&gt;
This may happen if you have entered site url incorrectly or this page doesn&amp;#39;t exist anymore.&lt;/p&gt;

&lt;p&gt;You can try searching page again or go back to home&lt;/p&gt;

&lt;form action=&#39;/search&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt;
&lt;input id=&#39;s&#39; name=&#39;q&#39; onblur=&#39;if (this.value == &amp;quot;&amp;quot;) {this.value = &amp;quot;Search...&amp;quot;;}&#39; onfocus=&#39;if (this.value == &amp;quot;Search...&amp;quot;) {this.value = &amp;quot;&amp;quot;;}&#39; type=&#39;text&#39; value=&#39;Search...&#39;/&gt;
&lt;input id=&#39;searchsubmit&#39; type=&#39;submit&#39; value=&#39;Go&#39;/&gt;
&lt;/form&gt;

&lt;/div&gt;</pre>
						 </li>
						 <li>Change which your's Language</li>
						 </ol>	
                       </div>
				<div class="page-header">
                        <h3 id="creating_content_archive">Archive Pages</h3>
                    </div>
					<div class="row"> 					
					<div class="span5">
                    <p>
                        To make archive page just copy this HTML code to New Page.
                    </p>
                    <pre class="prettyprint html">&lt;div id=&quot;table-outer&quot;&gt;&lt;table border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Sort List by:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;select id=&quot;orderFeedBy&quot;&gt;&lt;option value=&quot;published&quot; selected&gt;Latest Published&lt;/option&gt;&lt;option value=&quot;updated&quot;&gt;Latest Update&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Sort List by Category:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;span id=&quot;labelSorter&quot;&gt;&lt;select disabled&gt;&lt;option selected&gt;Loading...&lt;/option&gt;&lt;/select&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Search with Keyword:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;form id=&quot;postSearcher&quot;&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/form&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;header id=&quot;resultDesc&quot;&gt;&lt;/header&gt;&lt;ul id=&quot;feedContainer&quot;&gt;&lt;/ul&gt;&lt;div id=&quot;feedNav&quot;&gt;Loading...&lt;/div&gt;
&lt;script src=&quot;http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
					</div>
					<div class="span7">
					<img class="img-polaroid" src="assets/archive.png"/>
					</div>
					</div>
					<div class="row">                           
					<p>
					If don't know how to make New Page Follow this step.
					</p>
					<ol>
					<li>On blogger Dashbord Click <strong class="page">Page</strong></li>
					<li>Click <strong class="buttonx">New Page</strong> and Choose Blank Page</li>
					<li>Add Title</li>
					<li>Click <strong class="buttonx">HTML</strong> and Copy this Code<br/><br/>
					<pre class="prettyprint html">&lt;div id=&quot;table-outer&quot;&gt;&lt;table border=&quot;0&quot;&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Sort List by:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;select id=&quot;orderFeedBy&quot;&gt;&lt;option value=&quot;published&quot; selected&gt;Latest Published&lt;/option&gt;&lt;option value=&quot;updated&quot;&gt;Latest Update&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Sort List by Category:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;span id=&quot;labelSorter&quot;&gt;&lt;select disabled&gt;&lt;option selected&gt;Loading...&lt;/option&gt;&lt;/select&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;label&gt;Search with Keyword:&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;form id=&quot;postSearcher&quot;&gt;&lt;input type=&quot;text&quot;/&gt;&lt;/form&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;&lt;header id=&quot;resultDesc&quot;&gt;&lt;/header&gt;&lt;ul id=&quot;feedContainer&quot;&gt;&lt;/ul&gt;&lt;div id=&quot;feedNav&quot;&gt;Loading...&lt;/div&gt;
&lt;script src=&quot;http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
					</li>
					<li>Click <strong class="buttonorg">Publish</strong> </li>
					</ol>      
				
				</div>
                </section>
                <section id="shortcodes_widgets">
                    <div class="page-header">
                        <h1 id="shortcodes">Widgets<small> Configuration</small></h1>
                    </div>
					<div class="page-header"><h2 id="sumloadmore">Summary, Load More and View Mode</h2></div>
					<p class="note">NB: summary and Load more image use Official Blogspot Thumbnail. It mean the image must upload to blogspot for make it show on home page.</p>
                        <div class="row"><h3>Summary and Load More</h3>
						<div class="span6">
                                <img class="img-polaroid" src="assets/loadmoreandview.png" /><br/><br/>
								 <img class="img-polaroid" src="assets/sumarry.png" />
<p>								 
                           <h5> (Default) Complete Javascript to setup view mode like this code:</h5>
						 <pre class="prettyprint js">viewMode({
viewmodedefault:&quot;grid&quot;,
cookielist:&quot;list&quot;,
cookiegrid:&quot;grid&quot;
});</pre>
<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode</td>
                                        </tr>
                                        <tr>
                                            <td>cookielist</td>
                                            <td>List mode Cookies name. This will store on browser to make if user click list mode button.</td>
                                        </tr> 
										<tr>
                                            <td>cookiegrid</td>
                                            <td>Grid mode Cookies name. This will store on browser to make if user click Grid mode button.</td>
                                        </tr> 										
                                     
                                    </tbody>
                                </table>
								
 <h5>(Default) Complete Javascript to setup Load More Post like this code: </h5>
						 <pre class="prettyprint js">loadMorePost({
thumbnailSize:&quot;s180-c&quot;,
summaryLength:200,
MoreText:&quot;Load more posts&quot;,
viewmodedefault:&quot;grid&quot;,
cookielist:&quot;list&quot;,
cookiegrid:&quot;grid&quot;,
monthName:[&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;],
slideffect:true,
maxImage:5,
slideSpeed:5000,
BackupImage:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;
});</pre>
<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									 <tr>
                                            <td>thumbnailSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br>
											To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.<br>
											Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
											</td>
                                        </tr>
										 <tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr>
										 <tr>
                                            <td>MoreText</td>
                                            <td>Load more text to display: default: &quot;Load more posts&quot;</td>
                                        </tr>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode (make it same setting with view mode javascript)</td>
                                        </tr>
                                        <tr>
                                            <td>cookielist</td>
                                            <td>List mode Cookies name. This will store on browser to make if user click list mode button. (make it same name with view mode javascript)</td>
                                        </tr> 
										<tr>
                                            <td>cookiegrid</td>
                                            <td>Grid mode Cookies name. This will store on browser to make if user click Grid mode button. (make it same name with view mode javascript)</td>
                                        </tr> 
										<tr>
                                            <td>monthName</td>
                                            <td>Month Name language. This month name must be same with datenya(); month name</td>
                                        </tr>
										<tr>
                                            <td>slideffect</td>
                                            <td>If your post have image more than you set this <i>true</i> image will become slideshow. note: this setting must be same with Summary Script</td>
                                        </tr>
										<tr>
                                            <td>maxImage</td>
                                            <td>Maximum image add to the sildeshow</td>
                                        </tr>
										<tr>
                                            <td>slideSpeed</td>
                                            <td>Set the speed of the slideshow cycling, in milliseconds</td>
                                        </tr>										
                                     <tr>
                                            <td>BackupImage</td>
                                            <td>Backup image if post don't have image store on blogspot or picasa web.</td>
                                        </tr> 
                                    </tbody>
                                </table>
	</p>						
							</div>
                            <div class="span6"><h4>Summary</h4>
							To change image size and Summary length follow this step.
                                <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint html">var configSummary = {
thumbnailSize: &quot;s180-c&quot;, // Define the post thumbnail size
summaryLength: 200, // Define the summary length 
slideffect: true, // Define to make image slide
maxImage:5, // Define Maximal Image to image slide
slideSpeed: 3000, // Define Slideshow Speed in milisecond
BackupImage: &#39;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&#39; // Backup image if post don&#39;t have image   
};</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>thumbnailSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br>
											To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.<br>
											Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
											</td>
                                        </tr>
                                        <tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr>
										<tr>
                                            <td>slideffect</td>
                                            <td>If your post have image more than you set this <i>true</i> image will become slideshow. note: this setting must be same with Load More Post or Page Navigation</td>
                                        </tr>
										<tr>
                                            <td>maxImage</td>
                                            <td>Maximum image add to the sildeshow</td>
                                        </tr>
										<tr>
                                            <td>slideSpeed</td>
                                            <td>Set the speed of the slideshow cycling, in milliseconds</td>
                                        </tr>										
                                      <tr>
                                            <td>BackupImage</td>
                                            <td>URL Backup image if post don't have image</td>
                                        </tr>  
                                    </tbody>
                                </table> 					 
                                    </li>
                                </ol>
								<h4>Load More Post (Home Page)</h4>
								To edit Load More Text, change image size and Summary length follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">loadMorePost ({
thumbnailSize:&quot;s180-c&quot;,
summaryLength:200,
MoreText:&quot;Load more posts&quot;
});</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>thumbnailSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br>
											To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.<br>
											Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
											</td>
                                        </tr>
                                        <tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr> 
										<tr>
                                            <td>MoreText</td>
                                            <td>Load more text to display: default: &quot;Load more posts&quot;</td>
                                        </tr> 										
                                     
                                    </tbody>
                                </table> 
<p class="note">image size and summary length on summary script and Load more script must have same value</p>								
                                    </li>
                                </ol>
								<h4>View Mode (Home Page)</h4>
								To edit View Mode from Grid mode to List Mode follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">viewMode();</pre>
						 (Default) Complete Javascript to setup view mode like this code:
						 <pre class="prettyprint js">viewMode({
viewmodedefault:&quot;grid&quot;,
cookielist:&quot;list&quot;,
cookiegrid:&quot;grid&quot;
});</pre>
	<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode</td>
                                        </tr>
                                        <tr>
                                            <td>cookielist</td>
                                            <td>List mode Cookies name. This will store on browser to make if user click list mode button.</td>
                                        </tr> 
										<tr>
                                            <td>cookiegrid</td>
                                            <td>Grid mode Cookies name. This will store on browser to make if user click Grid mode button.</td>
                                        </tr> 										
                                     
                                    </tbody>
                                </table> 							
                                    </li>
                                </ol>
                            </div>
</div>				
           <h4>Date (Month Name)</h4>
								To edit change the Date Month name follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">datenya();</pre>
						 (Default) Complete Javascript to setup view mode like this code:
						 <pre class="prettyprint js">datenya({
monthName:[&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;]
});</pre>               
If you change this month name you must change Load More Post or Page Navigation month name too.	<br/>
 </li>
 </ol>

 <h3 id="page_navigation">Page Navigation</h3>
 <div style="text-align:center">
 <img class="img-polaroid" src="assets/pagenavi.png">
 </div><br/><br/>
								To edit change Load More Post with Page Navigation follow this step.
                                 <ol>
                                  <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">viewMode({
  viewmodedefault:&#39;list&#39;,
  cookielist:&#39;list1&#39;,
  cookiegrid:&#39;grid1&#39;
});
loadMorePost({
  viewmodedefault:&#39;list&#39;,
  cookielist:&#39;list1&#39;,
  cookiegrid:&#39;grid1&#39;,
  thumbnailSize:&quot;s180-c&quot;,
  summaryLength:200,
  MoreText:&quot;Load more posts&quot;
});</pre>
						 and this code<br/>
						 <pre class="prettyprint js">viewMode();
loadMorePost({
  thumbnailSize:&quot;s180-c&quot;,
  summaryLength:200,
  MoreText:&quot;Load more posts&quot;
});</pre> 
change all with:<br/>
<pre class="prettyprint js">viewMode();
pageNavi({
postperpage:6,
numshowpage:3,	
thumbnailSize:&quot;s180-c&quot;,
summaryLength:200,
});</pre> 
						 (Default) Complete Javascript to setup page Navigation like this code:
						 <pre class="prettyprint js">pageNavi({
postperpage:6,
numshowpage:3,
previous:&quot;&amp;#171;&quot;,
next:&quot;&amp;#187;&quot;,
loadAjax:true,		
thumbnailSize:&quot;s180-c&quot;,
summaryLength:200,
viewmodedefault:&quot;grid&quot;,
cookielist:&quot;list&quot;,
cookiegrid:&quot;grid&quot;,
monthName:[&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;],
slideffect:true,
maxImage:5,
slideSpeed:5000,
BackupImage:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif&quot;
});</pre>               
<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>postperpage</td>
                                            <td>Number Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting</td>
                                        </tr>
										<tr>
                                            <td>numshowpage</td>
                                            <td>Number Page Number will Show</td>
                                        </tr>
										<tr>
                                            <td>previous</td>
                                            <td>previous text/word.</td>
                                        </tr>
										<tr>
                                            <td>next</td>
                                            <td>next text/word. </td>
                                        </tr>
										<tr>
                                            <td>loadAjax</td>
                                            <td>option true or false. if set true will be same like Load more Post. If false page will be redirect</td>
                                        </tr>
										 <tr>
                                            <td>thumbnailSize</td>
                                            <td>Image Format use Picasa/Blogspot image format: <br>
											To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square.<br>
											Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
											</td>
                                        </tr>
										<tr>
                                            <td>summaryLength</td>
                                            <td>Define the summary length</td>
                                        </tr>
                                        <tr>
                                            <td>viewmodedefault</td>
                                            <td>This will setup view mode: you can choose <i>&quot;grid&quot;</i> to show your's post on grid mode or <i>&quot;list&quot;</i> to show your's post on list mode</td>
                                        </tr>
                                        <tr>
                                            <td>cookielist</td>
                                            <td>List mode Cookies name. This will store on browser to make if user click list mode button.</td>
                                        </tr> 
										<tr>
                                            <td>cookiegrid</td>
                                            <td>Grid mode Cookies name. This will store on browser to make if user click Grid mode button.</td>
                                        </tr> 
										<tr>
                                            <td>monthName</td>
                                            <td>Month Name language. This month name must be same with datenya(); month name</td>
                                        </tr>										
                                    	<tr>
                                            <td>slideffect</td>
                                            <td>If your post have image more than you set this <i>true</i> image will become slideshow. note: this setting must be same with Summary Script</td>
                                        </tr>
										<tr>
                                            <td>maxImage</td>
                                            <td>Maximum image add to the sildeshow</td>
                                        </tr>
										<tr>
                                            <td>slideSpeed</td>
                                            <td>Set the speed of the slideshow cycling, in milliseconds</td>
                                        </tr>
                                    </tbody>
                                </table> 
								</li>
								</ol>

																				
                       
					<div class="page-header"><h2 id="recentcommentwidgets">Recent Comments</h2></div>
                        <div class="row">
                            <div class="span4">
							<img class="img-polaroid" src="assets/reccomment.png" />                               
                            </div>
                            <div class="span8">
							To add recent comments widget follow this step<br/> 
                                <ol>
                                    <li>on Dashbord Blogger Click <strong class="layout">Layout</strong></li>
                                    <li>Click <span class="addgadget">Add a Gadget</span></li>
                                    <li>Choose HTML/Javascript</li>
									<li>Copy this Code:<br/><br/>
									<pre class="prettyprint html">&lt;div id=&quot;rcentcomnets&quot;&gt;&lt;/div&gt;
&lt;script type=&#39;text/javascript&#39;&gt;
RecentComments();
&lt;/script&gt;</pre>
									</li>
									<li>Click <strong class="buttonorg">Save</strong></li>
                                </ol>
								<p>(Default) Complete Javascript to call Recent Comments like this code:
								<pre class="prettyprint html">RecentComments({
blogURL:&quot;&quot;,
numComments:4,
characters:100,
id_containrc:&quot;#rcentcomnets&quot;,
avatarSize:50,
loadingClass:&quot;loadingxx&quot;,
Showimage:true,
defaultAvatar:&quot;http://4.bp.blogspot.com/-AEWksK942OE/UFiyLzXJhiI/AAAAAAAAFKE/jBegaGPClxI/s70/user-anonymous-icon.png&quot;,
MonthNames:[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;],
maxfeeds:50,
adminBlog:&quot;&quot;
});</pre>
								<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
										<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>numComments</td>
                                            <td>maximum number of recent comment</td>
                                        </tr>
                                        <tr>
                                            <td>characters</td>
                                            <td>Number of summary characters to show. if set 0, will not show summary</td>
                                        </tr>
                                        <tr>
                                            <td>id_containrc</td>
                                            <td>ID of div where the recent comment will be display must add this #, Example: if want to show in &lt;div id=&quot;rcentcomnets&quot;&gt;&lt;/div&gt; write like this &quot;#rcentcomnets&quot;</td>
                                        </tr>
                                        <tr>
                                            <td>avatarSize</td>
                                            <td>Image thumbnail size/avatar size</td>
                                        </tr>
                                        <tr>
                                            <td>loadingClass</td>
                                            <td>Class went the recent comment loading.</td>
                                        </tr>
                                        <tr>
                                            <td>Showimage</td>
                                            <td>Show or hide the avatar. Value : true or false</td>
                                        </tr>
                                        <tr>
                                            <td>defaultAvatar</td>
                                            <td>Backup image if comment author don't have avatar image</td>
                                        </tr>
                                        <tr>
                                            <td>MonthNames</td>
                                            <td>Format month name</td>
                                        </tr>
                                        <tr>
                                            <td>maxfeeds</td>
                                            <td>Maximum feed to load</td>
                                        </tr>
                                      <tr>
                                            <td>adminBlog</td>
                                            <td>Control to show or hide author/admin comment. ex: if you don't want to show your comment, simply just write yours blogger name like this adminBlog:"satank MKR" </td>
                                        </tr>
                                    </tbody>
                                </table> 
								</p>
                            </div>
                       </div>
                             
							 <div class="page-header"><h2 id="jsonresultwidget">JSON Search Result</h2></div>
                        <div class="row">
                            <div class="span4">
							<img class="img-polaroid" src="assets/Sevidasearchresult.png" />                               
                            </div>
                            <div class="span8">
							To edit JSON Search Result Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">searchxx({summaryLength:100, scrthumbSize:50});</pre></li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
								<p>(Default) Complete Javascript to call JSON Search Result like this code:
								<pre class="prettyprint html">searchxx({
blogURL:&quot;&quot;,
srcBlank:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif&quot;,
findText:&quot;Search results for keyword&quot;,
NotfindText:&quot;No result!&quot;,
Showthumb:true,
LoadingText:&quot;Searching...&quot;,
summaryLength:100, 
scrthumbSize:50
});</pre>
								<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>srcBlank</td>
                                            <td>Backup image if post don't have image</td>
                                        </tr>
                                        <tr>
                                            <td>findText</td>
                                            <td>Sentence if founded post by the keyword</td>
                                        </tr>
                                        <tr>
                                            <td>NotfindText</td>
                                            <td>Text if no post founded</td>
                                        </tr>
										<tr>
                                            <td>Showthumb</td>
                                            <td>Show or hide the post thumbnail. Value : true or false</td>
                                        </tr>                                        
                                        <tr>
                                            <td>LoadingText</td>
                                            <td>Text to show went searching</td>
                                        </tr>
                                        <tr>
                                            <td>summaryLength</td>
                                            <td>Length of summary characters</td>
                                        </tr>
                                        <tr>
                                            <td>scrthumbSize</td>
                                            <td>Size of thumbnail image, size in pixel</td>
                                        </tr>                                        
                                    </tbody>
                                </table> 
								</p>
                            </div>
                       </div>

                        <div class="page-header"><h2 id="emoticon">Emoticon</h2></div>
                        <div class="row">
                            <div class="span4">
							<img class="img-polaroid" src="assets/emoticon.png" />                               
                            </div>
                            <div class="span8">
							To edit Emoticon Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">emoticonx({
emoRange:&quot;#comments p, div.emoWrap&quot;,
putEmoAbove:&quot;iframe#comment-editor&quot;,
topText:&quot;Click to see the code!&quot;,
emoMessage:&quot;To insert emoticon you must added at least one space before the code.&quot;
});</pre>
<p class="note">This Code you will found twice</p>
</li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
									<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>emoRange</td>
                                            <td>Where the emoticon will show/work</td>
                                        </tr>
                                        <tr>
                                            <td>putEmoAbove</td>
                                            <td>Where the emoticon sample will place</td>
                                        </tr>
                                        <tr>
                                            <td>topText</td>
                                            <td>Sentence below the emoticon sample</td>
                                        </tr>
                                        <tr>
                                            <td>emoMessage</td>
                                            <td>Sentence below the emoticon sample and alert box</td>
                                        </tr>										                                        
                                    </tbody>
                                </table> 
								
                            </div>
                       </div>
					   <div class="page-header"><h2 id="newsticker">News Ticker</h2></div>
                        <div class="row">                           
							<img class="img-polaroid" src="assets/newsticker.png" />                       
                            <br/> 
							To edit News Ticker Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">NewsTicker();</pre><br/>
						 (Default) Complete Javascript to call JSON Search Result like this code:<br/>
						 <pre class="prettyprint js">NewsTicker({
blogURL: &quot;&quot;,
MaxPost: 10,
Speed: 0.10,
titleText: &quot;Latest&quot;,
tagName: false,			
MonthNames: [&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;]
});</pre>
</li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
									<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load</td>
                                        </tr>
                                        <tr>
                                            <td>MaxPost</td>
                                            <td>Maximum number artikel will show on News Ticker</td>
                                        </tr>
                                        <tr>
                                            <td>Speed</td>
                                            <td>Speed each artikel effect</td>
                                        </tr>
                                        <tr>
                                            <td>titleText</td>
                                            <td>News Ticker Title Text</td>
                                        </tr>
										<tr>
                                            <td>tagName</td>
                                            <td>If you want to show News Ticker by the Label. Example: to show post from <i>Sports</i> Label just write like this <i>tagName:"Sports"</i></td>
                                        </tr>
										<tr>
                                            <td>MonthNames</td>
                                            <td>Format months name</td>
                                        </tr>
                                    </tbody>
                                </table> 
								
                         
                       </div>
					   
					   <div class="page-header"><h2 id="related_post">Related Post</h2></div>
                        <div class="row">
                            <div class="span6">
							<img class="img-polaroid" src="assets/relatedpost.png" />                               
                            </div>
                            <div class="span6">
							To edit Emoticon Text you can follow this step<br/> 
                                <ol>
                                    <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>Scroll down and Find this Code :<br/><br/>
						 <pre class="prettyprint js">relatedPostsWidget();</pre>
</li>
									<li>If you want to change it. You can see complete default Script below:</li>
                                </ol>
							<p>(Default) Complete Javascript to call Related Post like this code:
								<pre class="prettyprint html">relatedPostsWidget({
blogURL:&quot;&quot;,
maxPosts:5,
maxTags:5,
maxPostsPerTag:5,
ShowComment:true,
ShowDate:true,
DateFloat:false,
ShowDesc:true,
rlt_summary:100,			
relatedTitle:&quot;Related Posts&quot;,
readMoretext:&quot;Read more »&quot;			
rlpBlank:&quot;http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif&quot;
rlt_thumb:70			
recentTitle:&quot;Recent Posts&quot;
MonthNames:[&quot;Jan&quot;, &quot;Feb&quot;, &quot;Mar&quot;, &quot;Apr&quot;, &quot;May&quot;, &quot;Jun&quot;, &quot;Jul&quot;, &quot;Aug&quot;, &quot;Sep&quot;, &quot;Oct&quot;, &quot;Nov&quot;, &quot;Dec&quot;]
});</pre>	
									<table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>blogURL</td>
                                            <td>Yours blog URL or you can leave it blank to load where this script load.</td>
                                        </tr>
                                        <tr>
                                            <td>maxPosts</td>
                                            <td>Maximum number of article will be show (if Related Post)</td>
                                        </tr>
                                        <tr>
                                            <td>maxTags</td>
                                            <td>Maximum Tag/Label will load</td>
                                        </tr>
                                        <tr>
                                            <td>maxPostsPerTag</td>
                                            <td>Maximum post each tag/label will be show (maximum recent post if article don't have tag/label)</td>
                                        </tr>
										<tr>
                                            <td>ShowComment</td>
                                            <td>Show or Hide Comment Number. option true or false</td>
                                        </tr> 
										<tr>
                                            <td>ShowDate</td>
                                            <td>Show or hide Date. option true or false</td>
                                        </tr>
										<tr>
                                            <td>DateFloat</td>
                                            <td>If you want make the date like Recent Post by Tag Date model.</td>
                                        </tr> 
										<tr>
                                            <td>ShowDesc</td>
                                            <td>Show or hide post description. option true or false</td>
                                        </tr>										
										<tr>
                                            <td>rlt_summary</td>
                                            <td>Length of summary characters</td>
                                        </tr>                                        
                                        <tr>
                                            <td>rlt_thumb</td>
                                            <td>Size of thumbnail image, size in pixel</td>
                                        </tr>
                                        <tr>
                                            <td>relatedTitle</td>
                                            <td>Title if article have related post</td>
                                        </tr>
                                        <tr>
                                            <td>recentTitle</td>
                                            <td>Title if article don't have related post (will be load recent post)</td>
                                        </tr>
										<tr>
                                            <td>readMoretext</td>
                                            <td>Read More Text</td>
                                        </tr>
										<tr>
                                            <td>rlpBlank</td>
                                            <td>Backup image if post don't have image</td>
                                        </tr>
										<tr>
                                            <td>MonthNames</td>
                                            <td>Month name format</td>
                                        </tr>										
                                    </tbody>
                                </table> 
								
                            </div>
                       </div>
                        </section>                      


                        <section id="theme_customizer">
                            <div class="page-header"><h3>Theme Customizer</h3></div>
                            <p>It's Easy to customize this themes. Just Go to Blogger Dashbord and Click <strong class="template">Template</strong> then Click <strong class="buttonorg">Customize</strong> and Click Advanced<br/>
							<span style="color:red"><strong>NB :</strong> Blogger Customize will work if Blogger Mobile Template <strong>Enabled</strong> before upload this Theme</span><br/>
After customize yours template you can disable Blogger Mobile Template but it will make Blogger Customize not work<br/>	
							</p>
                            <img src="assets/temdesigner.png" class="img-polaroid"/> <br/><br/>
                            <table class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>Property</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
									<tr>
                                            <td>Header Title</td>
                                            <td>This for setting the Header Font, Description Font, Header Color and Description Color</td>
                                        </tr>
                                        <tr>
                                            <td>Top Navigation</td>
                                            <td>Top Navigation Text Color, Navigation Background Color, and Selected/current link Color</td>
                                        </tr>
                                        <tr>
                                            <td>Middle Navigation 1</td>
                                            <td>Background color, Shadow color and Selected/current link color</td>
                                        </tr>
                                        <tr>
                                            <td>Middle Navigation 2</td>
                                            <td>Font type, Sub Menu background color, Link Color</td>
                                        </tr>
										<tr>
                                            <td>Middle Navigation 3</td>
                                            <td>Responsive Button Color, Responsive Shadow color, Responsive Background Color</td>
                                        </tr>
										<tr>
                                            <td>Content Area</td>
                                            <td>Font type, Background color, Text Color, Box Shadow Color</td>
                                        </tr>
										<tr>
                                            <td>News Ticker</td>
                                            <td>Border Color, Latest Background Color, Latest Text Color</td>
                                        </tr>
										<tr>
                                            <td>Sidebar</td>
                                            <td>Sidebar Border Color, Sidebar Background Color, and Sidebar Text Color</td>
                                        </tr>
										<tr>
                                            <td>Sidebar Tab</td>
                                            <td>Tab Background Color, Tab Selected color, Tab Text color</td>
                                        </tr>
										<tr>
                                            <td>Main Area 1</td>
                                            <td>Heading font type, Post font type, Heading font color, Post text color</td>
                                        </tr>
										<tr>
                                            <td>Main Area 2</td>
                                            <td>Button/Date Background color, Button/Date Hover Color, Button/date Text Color</td>
                                        </tr>
										<tr>
                                            <td>Back top Button</td>
                                            <td>Back top Background color and Hover Color</td>
                                        </tr>
										<tr>
                                            <td>Footer Area 1</td>
                                            <td>Footer heading font type, Heading color, Footer Text color</td>
                                        </tr>
										<tr>
                                            <td>Footer Area 2</td>
                                            <td>Footer Background color and  Border top Color</td>
                                        </tr>
										<tr>
                                            <td>Search Box </td>
                                            <td>Search Box background Color, Text Color, Box Result Background Color, Box Result Text Color </td>
                                        </tr>
										<tr>
                                            <td>Comment Area</td>
                                            <td>Border Color, Reply Box Background Color, Reply Box Shadow Color</td>
                                        </tr>
										<tr>
                                            <td>Post Footer</td>
                                            <td>Border top Color, Background color</td>
                                        </tr>
										<tr>
                                            <td>Slideshow</td>
                                            <td>Slideshow title font type, Text Color, Title Background color, Description Background color</td>
                                        </tr>
										<tr>
                                            <td>Body Background Color</td>
                                            <td>Main body background color</td>
                                        </tr>
										<tr>
                                            <td>Link Color</td>
                                            <td>Main link color</td>
                                        </tr>
										<tr>
                                            <td>Visited Link color</td>
                                            <td>main visited link color</td>
                                        </tr>
										<tr>
                                            <td>Image Border Color</td>
                                            <td>Border of image color</td>
                                        </tr>
										<tr>
                                            <td>Heading Font</td>
                                            <td>Heading Font type</td>
                                        </tr>
										<tr>
                                            <td>Post Title Color</td>
                                            <td>Post Title color or artikel</td>
                                        </tr>										
                                    </tbody>
                                </table> 
                            </section>                     
                                                           


                              

                                       
                                       <hr />

                                       <div class="goodbye">
                                        <p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.</p>
                                    </div>

                                    <hr />

                                    <footer>
                                        <p>&copy; satankmkr 2013</p>
                                    </footer>

                                </div>
                                <!-- ========================= MAIN CONTAINER >> END ========================= -->


                                <!-- CHANGELOG >> START -->
                                <div class="modal hide fade" id="changelog" tabindex="-1" role="dialog" aria-labelledby="changelog-label" aria-hidden="true">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                        <h3 id="changelog-label">Changelog</h3>
                                    </div>
                                    <div class="modal-body">

                                        <!-- Code Block >> Start -->                   
                                        <pre>Current version 1.2:
Added: Ajax Page Navigation
Change: Recent Post by Tag Script
Change: Summary Script
Change: JSON Search result Script
Change: Related Post Script
Change: Featured Post Script

            <!-- +   Addition
            ^   Change
            -   Removed
            *   Security Fix
            #   Bug Fix
            !   Note</pre>
            <!-- Code Block >> End --> 

            <!-- Code Block >> Start -->                   
        </pre>
        <!-- Code Block >> End -->                   

    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
</div>
<!-- CHANGELOG >> END -->



<!-- CREDITS >> START -->
<div class="modal hide fade" id="credits" tabindex="-1" role="dialog" aria-labelledby="credits-label" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="credits-label">Credits</h3>
    </div>
    <div class="modal-body">
        <p>I've used the following images, icons or other files as listed.</p>
        <h3>JavaScript</h3>
        <ol>
<li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">Superfish v1.7.2 by Joel Birch</a></li>			
		   <li><a href="https://plus.google.com/108949996304093815163/about">Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman</a></li>
		   <li><a href="https://plus.google.com/108949996304093815163/about">Advanced Blogger TOC Script by Taufik Nurrohman</a></li>
		   <li><a href="http://github.com/rhodimus/jQuery-News-Ticker">jQuery News Ticker by Rhodimus </a></li>	
		   <li><a href="http://www.woothemes.com/flexslider/">jQuery FlexSlider v2.2 by Tyler Smith</a></li>
 <li><a href="http://brandonaaron.net/">Mousewheel v3.0.6 - jQuery Scroll Mouse Wheel by Brandon Aaron</a></li>
<li>hoverIntent r7 by Brian Chern brian(at)cherne(dot)net</li> 
<li>Antiscroll by Guillermo Rauch guillermo@learnboost.com</li> 
       </ol>      
</div>
<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<!-- CREDITS >> END -->

<!-- loading javascripts -->
<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>

<!-- init javascripts -->
<script src="assets/js/init.js"></script>

</body>

</html>
